<template>
  <div>
    <MyTable>
      <template #header>
        <tr>
          <th>#</th>
          <th>商品名称</th>
          <th>价格</th>
          <th>标签</th>
          <th>操作</th>
        </tr>
      </template>
      <template>
        <tr v-for="item in list" :key="item.id">
          <td>{{ item.id }}</td>
          <td>{{ item.goods_name }}</td>
          <td>{{ item.goods_price }}</td>
          <td>
            <div v-if="isShow" class="biao" @dblclick="fn">+Tag</div>
            <div v-else><input type="text" /></div>
            <strong class="status">{{ item.tags[0] }}</strong>
            <strong class="status">{{ item.tags[1] }}</strong>
          </td>
          <td class="dels"><button>删除</button></td>
        </tr>
      </template>
    </MyTable>
  </div>
</template>

<script>
import MyTable from '../components/MyTable'

export default {
  components: {
    MyTable,
  },
  data() {
    return {
      isShow: true,
      list: [
        {
          id: 1,
          goods_name: 'Teenmix/天美意夏季专柜同款金色布女鞋6YF18BT6',
          goods_price: 298,
          tags: ['舒适', '透气'],
          inputVisible: false,
          inputValue: '',
        },
        {
          id: 2,
          goods_name:
            '奥休斯(all shoes) 冬季保暖女士休闲雪地靴 舒适加绒防水短靴 防滑棉鞋子',
          goods_price: 89,
          tags: ['保暖', '防滑'],
          inputVisible: false,
          inputValue: '',
        },
        {
          id: 3,
          goods_name: '初语秋冬新款毛衣女 套头宽松针织衫简约插肩袖上衣',
          goods_price: 199,
          tags: ['秋冬', '毛衣'],
          inputVisible: false,
          inputValue: '',
        },
        {
          id: 4,
          goods_name:
            '佐露絲蕾丝衫女2020春秋装新款大码女装衬衫上衣雪纺衫韩版打底衫长袖',
          goods_price: 19,
          tags: ['雪纺衫', '打底'],
          inputVisible: false,
          inputValue: '',
        },
        {
          id: 5,
          goods_name:
            '熙世界中长款长袖圆领毛衣女2022秋装新款假两件连衣裙女107SL170',
          goods_price: 178,
          tags: ['圆领', '连衣裙'],
          inputVisible: false,
          inputValue: '',
        },
        {
          id: 6,
          goods_name:
            '烟花烫2021秋季装新品女装简约修身显瘦七分袖欧根纱连衣裙 花央',
          goods_price: 282,
          tags: ['秋季新品', '显瘦'],
          inputVisible: false,
          inputValue: '',
        },
        {
          id: 7,
          goods_name:
            '韩都衣舍2021韩版女装秋装新宽松显瘦纯色系带长袖衬衫NG8201',
          goods_price: 128,
          tags: ['韩都衣舍', '长袖衬衫'],
          inputVisible: false,
          inputValue: '',
        },
        {
          id: 8,
          goods_name:
            '预售纤莉秀大码女装胖妹妹秋装2020新款圆领百搭绣花胖mm休闲套头卫衣',
          goods_price: 128,
          tags: ['预售', '卫衣'],
          inputVisible: false,
          inputValue: '',
        },
        {
          id: 9,
          goods_name: '莎密2022夏改良旗袍裙连衣裙修身复古时尚日常短款礼服旗袍',
          goods_price: 128,
          tags: ['莎密', '礼服'],
          inputVisible: false,
          inputValue: '',
        },
        {
          id: 10,
          goods_name: '南极人秋冬韩版七彩棉加绒加厚一体保暖打底裤p7011',
          goods_price: 128,
          tags: ['南极人', '打底裤'],
          inputVisible: false,
          inputValue: '',
        },
      ], // 所有数据
    }
  },
  methods: {
    fn() {
      this.isShow = !this.isShow
    },
  },
}
</script>
<style scoped>
span {
  background-color: black;
  height: 100px;
}
.biao {
  background-color: aqua;
  width: 60px;
  height: 30px;
  border-radius: 10px;
  text-align: center;
  line-height: 30px;
}
.status {
  display: inline-block;
  background-color: yellow;
  border-radius: 10px;
  text-align: center;
  height: 20px;
  padding-left: 10px;
  padding-right: 10px;
  font-size: 12px;
  line-height: 20px;
}
tr .dels {
  height: 100px;
}
tr .dels button {
  height: 30px;
  border: red;
  border-radius: 10px;
  /* margin: auto; */
  background-color: red;
  color: #ccc;
}
</style>
